<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>财务报表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-500 to-purple-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-finance.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">财务报表</h1>
                <button onclick="shareReport()" class="text-white hover:opacity-80">
                    <i class="fas fa-share text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Report Type Tabs -->
        <div class="bg-white border-b border-gray-200 px-4 py-2">
            <div class="flex space-x-1">
                <button onclick="switchReport('overview')" class="flex-1 bg-indigo-100 text-indigo-600 py-2 px-3 rounded-lg text-sm font-medium border border-indigo-200" id="overviewTab">
                    总览
                </button>
                <button onclick="switchReport('profit')" class="flex-1 bg-gray-100 text-gray-600 py-2 px-3 rounded-lg text-sm hover:bg-gray-200" id="profitTab">
                    盈亏
                </button>
                <button onclick="switchReport('cashflow')" class="flex-1 bg-gray-100 text-gray-600 py-2 px-3 rounded-lg text-sm hover:bg-gray-200" id="cashflowTab">
                    现金流
                </button>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-200px)] overflow-y-auto pb-24">
            <!-- Overview Report -->
            <div id="overviewReport">
                <!-- Key Metrics -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        关键指标
                    </h3>
                    
                    <div class="grid grid-cols-2 gap-3 mb-4">
                        <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border border-green-200 p-4 text-center">
                            <i class="fas fa-chart-line text-green-600 text-2xl mb-2"></i>
                            <p class="text-xs text-gray-600 mb-1">月收入</p>
                            <p class="text-lg font-bold text-green-600">¥286,580</p>
                            <p class="text-xs text-green-600 mt-1">
                                <i class="fas fa-arrow-up mr-1"></i>+12.5%
                            </p>
                        </div>
                        
                        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 p-4 text-center">
                            <i class="fas fa-wallet text-blue-600 text-2xl mb-2"></i>
                            <p class="text-xs text-gray-600 mb-1">净利润</p>
                            <p class="text-lg font-bold text-blue-600">¥232,663</p>
                            <p class="text-xs text-blue-600 mt-1">
                                <i class="fas fa-arrow-up mr-1"></i>+15.8%
                            </p>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
                        <div class="grid grid-cols-3 gap-4 text-center">
                            <div>
                                <p class="text-xs text-gray-500 mb-1">订单数量</p>
                                <p class="text-lg font-bold text-gray-800">1,256</p>
                                <p class="text-xs text-green-600">+8.3%</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500 mb-1">客单价</p>
                                <p class="text-lg font-bold text-gray-800">¥228</p>
                                <p class="text-xs text-red-600">-2.1%</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500 mb-1">转化率</p>
                                <p class="text-lg font-bold text-gray-800">3.8%</p>
                                <p class="text-xs text-green-600">+0.5%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Revenue Trend Chart -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center justify-between">
                        <span class="flex items-center">
                            <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                            收入趋势
                        </span>
                        <select onchange="changePeriod(this.value)" class="text-xs bg-gray-100 rounded px-2 py-1 border-none">
                            <option value="7days">近7天</option>
                            <option value="30days" selected>近30天</option>
                            <option value="3months">近3个月</option>
                        </select>
                    </h3>
                    
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
                        <!-- Simulated Chart Area -->
                        <div class="h-40 flex items-end justify-between px-2">
                            <div class="flex flex-col items-center">
                                <div class="w-6 bg-indigo-400 mb-2" style="height: 60px;"></div>
                                <span class="text-xs text-gray-500">12/28</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-6 bg-indigo-500 mb-2" style="height: 80px;"></div>
                                <span class="text-xs text-gray-500">12/29</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-6 bg-indigo-600 mb-2" style="height: 100px;"></div>
                                <span class="text-xs text-gray-500">12/30</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-6 bg-indigo-500 mb-2" style="height: 75px;"></div>
                                <span class="text-xs text-gray-500">12/31</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-6 bg-indigo-600 mb-2" style="height: 120px;"></div>
                                <span class="text-xs text-gray-500">01/01</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-6 bg-indigo-700 mb-2" style="height: 140px;"></div>
                                <span class="text-xs text-gray-500">01/02</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-6 bg-indigo-600 mb-2" style="height: 110px;"></div>
                                <span class="text-xs text-gray-500">01/03</span>
                            </div>
                        </div>
                        
                        <div class="flex justify-between mt-4 text-xs text-gray-500">
                            <span>最低: ¥8,520</span>
                            <span>最高: ¥15,680</span>
                            <span>平均: ¥11,890</span>
                        </div>
                    </div>
                </div>

                <!-- Product Performance -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        商品表现
                    </h3>
                    
                    <div class="space-y-3">
                        <div class="bg-white rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gray-200 rounded-lg mr-3"></div>
                                    <div>
                                        <p class="text-sm font-medium">智能手机壳</p>
                                        <p class="text-xs text-gray-500">销量: 456件</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-green-600">¥45,600</p>
                                    <p class="text-xs text-gray-500">占比: 15.9%</p>
                                </div>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-indigo-600 h-2 rounded-full" style="width: 15.9%"></div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gray-200 rounded-lg mr-3"></div>
                                    <div>
                                        <p class="text-sm font-medium">蓝牙耳机</p>
                                        <p class="text-xs text-gray-500">销量: 328件</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-green-600">¥38,960</p>
                                    <p class="text-xs text-gray-500">占比: 13.6%</p>
                                </div>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-500 h-2 rounded-full" style="width: 13.6%"></div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gray-200 rounded-lg mr-3"></div>
                                    <div>
                                        <p class="text-sm font-medium">充电宝</p>
                                        <p class="text-xs text-gray-500">销量: 267件</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-green-600">¥26,700</p>
                                    <p class="text-xs text-gray-500">占比: 9.3%</p>
                                </div>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-purple-500 h-2 rounded-full" style="width: 9.3%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Profit Report (Hidden initially) -->
            <div id="profitReport" style="display: none;">
                <!-- Profit Summary -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        盈亏概览
                    </h3>
                    
                    <div class="bg-gradient-to-r from-green-50 to-blue-50 rounded-xl border border-green-200 p-4 mb-4">
                        <div class="text-center">
                            <p class="text-xs text-gray-600 mb-1">本月净利润</p>
                            <p class="text-2xl font-bold text-green-600 mb-2">¥232,663</p>
                            <p class="text-xs text-green-600">
                                <i class="fas fa-arrow-up mr-1"></i>较上月增长 +15.8%
                            </p>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4 mt-4 pt-3 border-t border-green-100">
                            <div class="text-center">
                                <p class="text-xs text-gray-600 mb-1">毛利润</p>
                                <p class="text-lg font-bold text-blue-600">¥254,080</p>
                                <p class="text-xs text-blue-600">毛利率: 88.7%</p>
                            </div>
                            <div class="text-center">
                                <p class="text-xs text-gray-600 mb-1">营业利润</p>
                                <p class="text-lg font-bold text-purple-600">¥241,260</p>
                                <p class="text-xs text-purple-600">营业利润率: 84.2%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cost Breakdown -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        成本结构
                    </h3>
                    
                    <div class="space-y-3">
                        <div class="bg-white rounded-lg border border-gray-200 p-4">
                            <h4 class="text-sm font-medium text-gray-800 mb-3">营业成本明细</h4>
                            
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <div class="flex items-center">
                                        <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                                        <span class="text-sm text-gray-700">商品成本</span>
                                    </div>
                                    <div class="text-right">
                                        <span class="text-sm font-medium">¥32,500</span>
                                        <span class="text-xs text-gray-500 ml-2">11.3%</span>
                                    </div>
                                </div>
                                
                                <div class="flex justify-between items-center">
                                    <div class="flex items-center">
                                        <div class="w-3 h-3 bg-orange-500 rounded-full mr-2"></div>
                                        <span class="text-sm text-gray-700">平台佣金</span>
                                    </div>
                                    <div class="text-right">
                                        <span class="text-sm font-medium">¥8,597</span>
                                        <span class="text-xs text-gray-500 ml-2">3.0%</span>
                                    </div>
                                </div>
                                
                                <div class="flex justify-between items-center">
                                    <div class="flex items-center">
                                        <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
                                        <span class="text-sm text-gray-700">物流费用</span>
                                    </div>
                                    <div class="text-right">
                                        <span class="text-sm font-medium">¥4,823</span>
                                        <span class="text-xs text-gray-500 ml-2">1.7%</span>
                                    </div>
                                </div>
                                
                                <div class="flex justify-between items-center">
                                    <div class="flex items-center">
                                        <div class="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
                                        <span class="text-sm text-gray-700">推广费用</span>
                                    </div>
                                    <div class="text-right">
                                        <span class="text-sm font-medium">¥7,200</span>
                                        <span class="text-xs text-gray-500 ml-2">2.5%</span>
                                    </div>
                                </div>
                                
                                <div class="pt-2 border-t border-gray-100">
                                    <div class="flex justify-between items-center">
                                        <span class="text-sm font-medium text-gray-800">总成本</span>
                                        <span class="text-sm font-bold text-red-600">¥53,120</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Profit Trend -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        利润趋势
                    </h3>
                    
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-sm font-medium">近6个月利润变化</span>
                            <span class="text-xs text-gray-500">单位: 万元</span>
                        </div>
                        
                        <!-- Simulated Chart -->
                        <div class="h-32 flex items-end justify-between px-2">
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-green-400 to-green-500 mb-2 rounded-t" style="height: 60px;"></div>
                                <span class="text-xs text-gray-500">8月</span>
                                <span class="text-xs text-green-600 font-medium">18.5</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-green-400 to-green-600 mb-2 rounded-t" style="height: 80px;"></div>
                                <span class="text-xs text-gray-500">9月</span>
                                <span class="text-xs text-green-600 font-medium">20.2</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-green-500 to-green-600 mb-2 rounded-t" style="height: 95px;"></div>
                                <span class="text-xs text-gray-500">10月</span>
                                <span class="text-xs text-green-600 font-medium">21.8</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-green-400 to-green-500 mb-2 rounded-t" style="height: 75px;"></div>
                                <span class="text-xs text-gray-500">11月</span>
                                <span class="text-xs text-green-600 font-medium">19.6</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-green-500 to-green-700 mb-2 rounded-t" style="height: 110px;"></div>
                                <span class="text-xs text-gray-500">12月</span>
                                <span class="text-xs text-green-600 font-medium">24.1</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-green-600 to-green-700 mb-2 rounded-t" style="height: 125px;"></div>
                                <span class="text-xs text-gray-500">1月</span>
                                <span class="text-xs text-green-600 font-medium">23.3</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ROI Analysis -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        投资回报率分析
                    </h3>
                    
                    <div class="grid grid-cols-2 gap-3">
                        <div class="bg-white rounded-lg border border-gray-200 p-3 text-center">
                            <i class="fas fa-percentage text-blue-600 text-lg mb-2"></i>
                            <p class="text-xs text-gray-600 mb-1">ROI</p>
                            <p class="text-lg font-bold text-blue-600">385.7%</p>
                            <p class="text-xs text-green-600">+12.3%</p>
                        </div>
                        
                        <div class="bg-white rounded-lg border border-gray-200 p-3 text-center">
                            <i class="fas fa-chart-line text-purple-600 text-lg mb-2"></i>
                            <p class="text-xs text-gray-600 mb-1">ROAS</p>
                            <p class="text-lg font-bold text-purple-600">4.86</p>
                            <p class="text-xs text-green-600">+8.9%</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cash Flow Report (Hidden initially) -->
            <div id="cashflowReport" style="display: none;">
                <!-- Cash Flow Summary -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        现金流概览
                    </h3>
                    
                    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 p-4 mb-4">
                        <div class="text-center mb-3">
                            <p class="text-xs text-gray-600 mb-1">本月净现金流</p>
                            <p class="text-2xl font-bold text-blue-600 mb-2">+¥168,526</p>
                            <p class="text-xs text-blue-600">
                                <i class="fas fa-arrow-up mr-1"></i>现金流健康度: 优秀
                            </p>
                        </div>
                        
                        <div class="grid grid-cols-3 gap-3 text-center">
                            <div>
                                <p class="text-xs text-gray-600 mb-1">经营现金流</p>
                                <p class="text-lg font-bold text-green-600">+¥182,340</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-600 mb-1">投资现金流</p>
                                <p class="text-lg font-bold text-orange-600">-¥8,520</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-600 mb-1">筹资现金流</p>
                                <p class="text-lg font-bold text-purple-600">-¥5,294</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cash Flow Activities -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        现金流活动
                    </h3>
                    
                    <div class="space-y-3">
                        <!-- Operating Activities -->
                        <div class="bg-white rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="text-sm font-medium text-gray-800 flex items-center">
                                    <i class="fas fa-chart-line text-green-600 mr-2"></i>
                                    经营活动现金流
                                </h4>
                                <span class="text-sm font-bold text-green-600">+¥182,340</span>
                            </div>
                            
                            <div class="space-y-2">
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-600">销售收入</span>
                                    <span class="text-xs text-green-600">+¥286,580</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-600">商品采购</span>
                                    <span class="text-xs text-red-600">-¥65,200</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-600">运营费用</span>
                                    <span class="text-xs text-red-600">-¥39,040</span>
                                </div>
                            </div>
                        </div>

                        <!-- Investment Activities -->
                        <div class="bg-white rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="text-sm font-medium text-gray-800 flex items-center">
                                    <i class="fas fa-coins text-orange-600 mr-2"></i>
                                    投资活动现金流
                                </h4>
                                <span class="text-sm font-bold text-orange-600">-¥8,520</span>
                            </div>
                            
                            <div class="space-y-2">
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-600">设备采购</span>
                                    <span class="text-xs text-red-600">-¥5,200</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-600">软件投资</span>
                                    <span class="text-xs text-red-600">-¥3,320</span>
                                </div>
                            </div>
                        </div>

                        <!-- Financing Activities -->
                        <div class="bg-white rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="text-sm font-medium text-gray-800 flex items-center">
                                    <i class="fas fa-university text-purple-600 mr-2"></i>
                                    筹资活动现金流
                                </h4>
                                <span class="text-sm font-bold text-purple-600">-¥5,294</span>
                            </div>
                            
                            <div class="space-y-2">
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-600">借款利息</span>
                                    <span class="text-xs text-red-600">-¥1,294</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-600">股东分红</span>
                                    <span class="text-xs text-red-600">-¥4,000</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cash Flow Trend -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        现金流趋势
                    </h3>
                    
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-sm font-medium">近6个月现金流变化</span>
                            <span class="text-xs text-gray-500">单位: 万元</span>
                        </div>
                        
                        <!-- Simulated Chart -->
                        <div class="h-32 flex items-end justify-between px-2">
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-blue-400 to-blue-500 mb-2 rounded-t" style="height: 70px;"></div>
                                <span class="text-xs text-gray-500">8月</span>
                                <span class="text-xs text-blue-600 font-medium">+15.2</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-blue-500 to-blue-600 mb-2 rounded-t" style="height: 90px;"></div>
                                <span class="text-xs text-gray-500">9月</span>
                                <span class="text-xs text-blue-600 font-medium">+18.7</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-blue-400 to-blue-500 mb-2 rounded-t" style="height: 65px;"></div>
                                <span class="text-xs text-gray-500">10月</span>
                                <span class="text-xs text-blue-600 font-medium">+14.3</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-blue-500 to-blue-700 mb-2 rounded-t" style="height: 105px;"></div>
                                <span class="text-xs text-gray-500">11月</span>
                                <span class="text-xs text-blue-600 font-medium">+21.4</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-blue-600 to-blue-700 mb-2 rounded-t" style="height: 120px;"></div>
                                <span class="text-xs text-gray-500">12月</span>
                                <span class="text-xs text-blue-600 font-medium">+23.8</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 bg-gradient-to-t from-blue-500 to-blue-600 mb-2 rounded-t" style="height: 85px;"></div>
                                <span class="text-xs text-gray-500">1月</span>
                                <span class="text-xs text-blue-600 font-medium">+16.9</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cash Position -->
                <div class="p-4">
                    <h3 class="font-semibold mb-3 flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        现金状况
                    </h3>
                    
                    <div class="grid grid-cols-2 gap-3">
                        <div class="bg-white rounded-lg border border-gray-200 p-3 text-center">
                            <i class="fas fa-wallet text-green-600 text-lg mb-2"></i>
                            <p class="text-xs text-gray-600 mb-1">账户余额</p>
                            <p class="text-lg font-bold text-green-600">¥168,526</p>
                            <p class="text-xs text-green-600">可用资金</p>
                        </div>
                        
                        <div class="bg-white rounded-lg border border-gray-200 p-3 text-center">
                            <i class="fas fa-clock text-orange-600 text-lg mb-2"></i>
                            <p class="text-xs text-gray-600 mb-1">现金周转天数</p>
                            <p class="text-lg font-bold text-orange-600">12天</p>
                            <p class="text-xs text-green-600">优于行业</p>
                        </div>
                        
                        <div class="bg-white rounded-lg border border-gray-200 p-3 text-center">
                            <i class="fas fa-shield-alt text-blue-600 text-lg mb-2"></i>
                            <p class="text-xs text-gray-600 mb-1">现金储备率</p>
                            <p class="text-lg font-bold text-blue-600">2.8个月</p>
                            <p class="text-xs text-blue-600">安全水平</p>
                        </div>
                        
                        <div class="bg-white rounded-lg border border-gray-200 p-3 text-center">
                            <i class="fas fa-chart-pie text-purple-600 text-lg mb-2"></i>
                            <p class="text-xs text-gray-600 mb-1">现金利用率</p>
                            <p class="text-lg font-bold text-purple-600">89.2%</p>
                            <p class="text-xs text-green-600">高效运营</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex gap-3">
                <button onclick="exportReport()" class="flex-1 bg-indigo-100 text-indigo-700 py-3 rounded-lg font-medium hover:bg-indigo-200 transition-colors">
                    <i class="fas fa-file-export mr-2"></i>导出报表
                </button>
                <button onclick="downloadReport()" class="flex-1 bg-gradient-to-r from-indigo-500 to-purple-500 text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity">
                    <i class="fas fa-download mr-2"></i>下载PDF
                </button>
            </div>
        </div>
    </div>

    <script>
        // Report management functions
        function switchReport(reportType) {
            // Hide all reports
            document.getElementById('overviewReport').style.display = 'none';
            document.getElementById('profitReport').style.display = 'none';
            document.getElementById('cashflowReport').style.display = 'none';
            
            // Reset all tab styles
            const tabs = ['overviewTab', 'profitTab', 'cashflowTab'];
            tabs.forEach(tabId => {
                const tab = document.getElementById(tabId);
                tab.className = 'flex-1 bg-gray-100 text-gray-600 py-2 px-3 rounded-lg text-sm hover:bg-gray-200';
            });
            
            // Show selected report and highlight tab
            switch(reportType) {
                case 'overview':
                    document.getElementById('overviewReport').style.display = 'block';
                    document.getElementById('overviewTab').className = 'flex-1 bg-indigo-100 text-indigo-600 py-2 px-3 rounded-lg text-sm font-medium border border-indigo-200';
                    showToast('总览报表已加载');
                    break;
                case 'profit':
                    document.getElementById('profitReport').style.display = 'block';
                    document.getElementById('profitTab').className = 'flex-1 bg-indigo-100 text-indigo-600 py-2 px-3 rounded-lg text-sm font-medium border border-indigo-200';
                    showToast('盈亏分析报表已加载');
                    break;
                case 'cashflow':
                    document.getElementById('cashflowReport').style.display = 'block';
                    document.getElementById('cashflowTab').className = 'flex-1 bg-indigo-100 text-indigo-600 py-2 px-3 rounded-lg text-sm font-medium border border-indigo-200';
                    showToast('现金流量报表已加载');
                    break;
            }
        }

        function changePeriod(period) {
            let periodText = '';
            switch(period) {
                case '7days':
                    periodText = '近7天';
                    break;
                case '30days':
                    periodText = '近30天';
                    break;
                case '3months':
                    periodText = '近3个月';
                    break;
            }
            
            showToast(`正在加载${periodText}数据...`);
            
            // 模拟数据刷新
            setTimeout(() => {
                showToast(`${periodText}数据已更新`);
            }, 1000);
        }

        function exportReport() {
            const options = ['Excel格式 (.xlsx)', 'CSV格式 (.csv)', 'JSON格式 (.json)'];
            const choice = prompt(`请选择导出格式：\n\n1. ${options[0]}\n2. ${options[1]}\n3. ${options[2]}\n\n请输入序号 (1-3):`);
            
            if (choice >= 1 && choice <= 3) {
                const format = options[choice - 1];
                showToast(`正在导出${format}...`);
                
                setTimeout(() => {
                    showToast('财务报表导出成功');
                }, 2000);
            }
        }

        function downloadReport() {
            showToast('正在生成PDF财务报表...');
            
            setTimeout(() => {
                showToast('PDF财务报表已下载');
            }, 2500);
        }

        function shareReport() {
            if (confirm('分享财务报表\n\n确认要生成分享链接吗？\n\n注意：分享链接将包含敏感财务信息，请谨慎分享。')) {
                showToast('正在生成分享链接...');
                
                setTimeout(() => {
                    showToast('分享链接已生成并复制到剪贴板');
                }, 1500);
            }
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('财务报表已加载');
        });
    </script>
</body>
</html>